<template>
	<view>
		<view class="my-home-head">
			<view class="fx-center">
				<view class="mine-avtr" @click="chooseImg">
					<image :src="avtr" mode="aspectFill" class="mine-avtr-img"></image>
					<image src="/static/home_add.png" mode="widthFix" class="avtr-add" v-if="isUser"></image>
				</view>

				<view class="">
					<view class="fx-center">
						<view class="mine-name">{{nickName}}</view>

						<!-- <van-button plain size="mini"
							custom-style="width:104rpx;font-size:20rpx;height:40rpx;line-height:36rpx;background: transparent;border: 1rpx solid rgba(255,255,255,0.5);color:rgba(255,255,255,0.5);">未实名</van-button> -->
					</view>
					<view class="mine-desc">ID:{{userId}} <text style="margin-left: 10rpx;">{{visit}}</text></view>
				</view>
			</view>
			<view class="fx-center-between home-total">
				<view class="fx-center">
					<view class="total-item">
						<view class="num">{{followers}}</view>
						<view class="">粉丝</view>
					</view>
					<view class="total-item">
						<view class="num">{{topics}}</view>
						<view class="">动态</view>
					</view>
					<view class="total-item">
						<view class="num">{{likes}}</view>
						<view class="">获赞</view>
					</view>
				</view>
				<van-button plain size="small"
					:custom-style="btnStyle+'background: transparent;border: 1rpx solid #ffffff;'" @click="toInfo"
					v-if="isUser">编辑</van-button>
				<view v-else>
					<van-button size="small"
						:custom-style="btnStyle+'background: transparent;border: 1rpx solid #ffffff;'" v-if="followed"
						@click="followUser">已关注</van-button>
					<van-button size="small" :custom-style="btnStyle+'background: #4078E5;border: 1rpx solid #4078E5;'"
						v-else @click="followUser">关注</van-button>
				</view>

			</view>
		</view>
		<view class="mine-trend">
			<view class="trend-title">
				{{isUser ? '我' : 'TA'}}的动态
			</view>
			<view class="" v-if="topicList.length>0">
				<view class="talk-list" v-for="(item,index) in topicList" :key="item.id">
					<talk-item :info="item" :showInput="showInput" @refrash="refrashList" @clickAction="clickAction"
						@showEvent="showInputEvent" @closeEvent="closeComment" @refrashUser="getMyInfo"></talk-item>
				</view>
				<view class="main-no-more" v-if="show_no_more">
					没有更多了
				</view>
			</view>

			<view class="main-no-data" style="padding: 50% 0;" v-else>
				<image src="/static/empty_img.png" mode="widthFix"></image>
				<view class="">暂无动态</view>
			</view>
		</view>
		<view v-show="showInput">
			<c-comment-input ref="commentRef" :topicID="inputInfo.id" :showCount="false" @setBlur="closeComment"
				@done="commentSubmit"></c-comment-input>
		</view>
		<c-user-opration ref="sheetRef" :info="inputInfo" :userId="inputInfo.user_id" @refrash="refrashList"
			@refrashUser="getMyInfo"></c-user-opration>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUser: true, //是否为自己的主页
				btnStyle: "width:120rpx;font-size:24rpx;height:48rpx;color:#fff;",

				nickName: '',
				avtr: '',
				userId: null,
				likes: 0, //获赞
				followers: 0, //粉丝
				topics: 0, //动态
				visit: '', //浏览提示
				followed: false, //是否关注

				topicList: [],
				page: 1,
				total: 0,
				show_no_more: false,

				//评论
				showInput: false,
				inputInfo: {}
			};
		},
		onLoad(e) {
			if (e.id) {
				this.userId = e.id
				this.isUser = (this.userId == uni.getStorageSync("userId") ? true : false)
			}
			this.getMyInfo()
			this.getTopic()
			uni.hideShareMenu()
		},
		onReachBottom() {
			if (this.total < this.topicList.length) {
				this.page++
				this.getTopic()
			} else {
				this.show_no_more = true
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				uni.setNavigationBarTitle({
					title: '个人主页'
				})
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 500
					}
				})
			} else {
				uni.setNavigationBarTitle({
					title: ''
				})
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#213253',
					animation: {
						duration: 500
					}
				})
			}
		},
		onShareAppMessage(res) {
			let uid = uni.getStorageSync("userId") || ''
			if (res.from === 'button') { // 来自页面内分享按钮
				const {
					id,
					img,
					content,
				} = res.target.dataset;
				return {
					title: content,
					path: `/pages/index/talkDetail/talkDetail?id=${id}&fuid=${uid}`,
					imageUrl: img
				}
			}
		},
		methods: {
			refrashList() {
				this.page = 1
				this.getTopic()
				this.getMyInfo()
			},
			// 获取用户信息
			getMyInfo() {
				this.$api.requst('/gwc/user/detail/' + this.userId, {
					id: this.userId
				}).then(res => {
					this.nickName = res.data.nickname || res.data.mobile
					this.avtr = res.data.avatar
					this.likes = res.data.likes
					this.followers = res.data.followers
					this.topics = res.data.topics
					this.visit = res.data.visit
					this.followed = res.data.followed
				})
			},
			// 获取个人中心动态
			getTopic() {
				let list = {
					page: this.page
				}
				if (!this.isUser) {
					list.uid = this.userId
				}
				this.$api
					.requst(this.isUser ? '/gwc/topics/my' : '/gwc/topics/other', list)
					.then((res) => {
						this.total = res.total
						if (this.page === 1) {
							this.show_no_more = false
							this.topicList = res.data
						} else {
							res.data.forEach(item => {
								this.topicList.push(item)
							})
						}
					})
			},
			toInfo() {
				uni.navigateTo({
					url: '/pages/mine/myInfo/myInfo'
				})
			},
			// 更改头像
			chooseImg() {
				if (this.isUser) {
					uni.chooseImage({
						count: 1, // 最多可以选择的图片张数，默认9
						sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
						sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
						success: async (res) => {
							let data = await this.$api.requestUploadQNY(res.tempFilePaths[0])
							this.$api.requst('/gwc/user/update_profile', {
									payload: {
										avatar: data.asset_id
									}
								}, 'POST')
								.then((res) => {
									this.$api.showError('修改成功！')
									this.getMyInfo()
								})
						}
					});
				}

			},
			// 关注用户
			followUser() {
				this.$api
					.requst('/gwc/follows', {
						action: this.followed ? 0 : 1, //0表示取消关注，1表示关注
						obj_type: 'User',
						obj_id: this.userId
					}, 'POST')
					.then((res) => {
						this.$api.showError(this.followed ? '已取消关注' : '关注成功')
						this.followed = !this.followed
						this.getMyInfo()
					})
			},
			// 点击输入框事件
			showInputEvent(data) {
				this.inputInfo = data
				this.showInput = true
				this.$refs.commentRef.setFocus()
			},
			// 关闭输入框
			closeComment() {
				this.showInput = false
			},
			// 评论成功
			commentSubmit() {
				this.inputInfo.comments_count++
				this.closeComment()
			},
			// 帖子用户操作
			clickAction(data) {
				this.inputInfo = data
				this.$nextTick(() => {
					this.$refs.sheetRef.show()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-home-head {
		background: linear-gradient(180deg, #213253 0%, #2B3E63 100%);
		padding: 24rpx 32rpx 72rpx;

		.mine-avtr {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 24rpx;
			position: relative;

			.mine-avtr-img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.avtr-add {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				bottom: -16rpx;
				left: 50%;
				transform: translateX(-50%);

			}
		}

		.mine-name {
			font-weight: bold;
			font-size: 34rpx;
			color: #FFFFFF;
			margin-right: 16rpx;
		}

		.mine-desc {
			color: rgba(255, 255, 255, 0.5);
			margin-top: 8rpx;
			font-size: 26rpx;
		}

		.home-total {
			margin-top: 50rpx;

			.total-item {
				font-size: 22rpx;
				color: #FFFFFF;
				margin-right: 100rpx;
				text-align: center;

				.num {
					font-weight: bolder;
					font-size: 36rpx;
					color: #FFFFFF;
					margin-bottom: 8rpx;
				}
			}

		}
	}

	.mine-trend {
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 0 0;
		padding: 44rpx 32rpx 50rpx;
		margin-top: -14rpx;

		.trend-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #161616;
		}

		.talk-list {
			margin-top: 48rpx;
			border-bottom: 1px solid #E2E2E2;
		}

		.talk-list:first-child {
			margin-top: 56rpx;
		}

		.talk-list:last-child {
			border: none;
		}
	}
</style>